<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>three.js demo</title>

	<script type="text/javascript" src="js/three.js"></script>
</head>
<body onload="init()">
	<canvas id="mainCavans" width="400px" height="300px;"></canvas>

	<script type="text/javascript">
		function init() {

			var renderer = new THREE.WebGLRenderer({
				canvas: document.getElementById('mainCavans')
			});//渲染器和canvas绑定
			renderer.setClearColor(0x000000);

			var scene = new THREE.Scene();//场景实例化

			var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);//定义一个透视投影的照相机
			camera.position.set(0,0,5);
			scene.add(camera);

			var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),new THREE.MeshBasicMaterial({
				color: 0xff0000
			}));//定义一个x/y/z方向长度分别为1、2、3的红色长方体
			scene.add(cube);

			renderer.render(scene,camera);//渲染
		}
	</script>
</body>
</html>